<template>
  <van-row>
    <van-nav-bar
      title="确认外发订单"
      left-arrow
      left-text="返回"
      @click-left="$emit('close')"
    />
    <van-cell-group>
      <van-col :span="12">
        <van-cell title="订单编号" :value="orderInfo.orderNo" />
      </van-col>
      <van-col :span="12">
        <van-cell title="产品名称" :value="productInfo.moldName" />
      </van-col>
      <div class="desc right">{{ orderInfo.attribute }}</div>
      <van-col :span="12">
        <van-cell title="颜色" :value="productInfo.color" />
      </van-col>
      <van-col :span="12">
        <van-cell title="材质" :value="productInfo.material" />
      </van-col>
      <van-col :span="12">
        <van-cell title="尺码" :value="productInfo.size" />
      </van-col>
      <van-col :span="12">
        <van-cell title="长度" :value="productInfo.length" />
      </van-col>
      <van-col :span="12">
        <van-cell title="订单单价" :value="orderInfo.unitPrice" />
      </van-col>
      <van-col :span="12">
        <van-cell title="订单数量" :value="orderInfo.quantity" />
      </van-col>
    </van-cell-group>
    <van-form @submit="doSubmit">
      <van-field
        v-model="submitForm.quantity"
        input-align="left"
        name="quantity"
        label="外发数量"
        disabled
        type="digit"
        placeholder="请输入外发数量"
        :rules="[{ required: true, message: '请填写数量'}]"
        @input="amountChange"
      />
      <van-field
        v-model="submitForm.unitPrice"
        input-align="left"
        name="unitPrice"
        label="外发单价"
        type="number"
        placeholder="请输入外发单价"
        :rules="[{ required: true, message: '请填写外发单价'}]"
        @input="amountChange"
      />
      <van-field
        readonly
        clickable
        name="supplierName"
        :value="submitForm.supplierName"
        label="供应商名称"
        placeholder="点击选择供应商"
        input-align="left"
        :rules="[{ required: true, message: '请选择供应商' }]"
        @click="showSupplier=true"
      />
      <van-field
        v-model="submitForm.remark"
        rows="2"
        autosize
        input-align="left"
        label="备注"
        type="textarea"
        maxlength="100"
        show-word-limit
        placeholder="请输入外发订单备注"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">确认</van-button>
      </div>
    </van-form>
    <div v-if="showSupplier">
      <select-supplier ref="selectSupplier" :visible="showSupplier" @close="handleCloseSupplier" />
    </div>
  </van-row>
</template>

<script>
import { selectSaleOrderById } from '@/api/saleOrder'
import { saveOsOrder } from '@/api/osOrder'
import { Dialog, Toast } from 'vant'
import Moment from 'moment'
import SelectSupplier from '@/components/modules/selectSupplier.vue'

export default {
  name: 'OsSubmitModule',
  components: { SelectSupplier },
  data() {
    return {
      showSupplier: false,
      orderInfo: {},
      productInfo: {},
      submitForm: {}
    }
  },
  methods: {
    init(orderId) {
      this.resetForm()
      selectSaleOrderById(orderId).then(resp => {
        if (resp.success) {
          this.orderInfo = resp.data
          this.productInfo = resp.data.productInfo
          this.submitForm.orderId = resp.data.id
          this.submitForm.quantity = resp.data.quantity
        }
      })
    },
    resetForm() {
      this.orderInfo = {}
      this.productInfo = {}
      this.submitForm = {
        id: '',
        quantity: '',
        unitPrice: '',
        supplierName: '',
        remark: ''
      }
    },
    doSubmit() {
      if (Number(this.submitForm.unitPrice) < Number(this.orderInfo.unitPrice)) {
        Dialog.confirm({
          title: '外发确认',
          message: `外发单价:${this.submitForm.unitPrice},小于订单单价:${this.orderInfo.unitPrice},存在亏损,是否继续外发？`
        }).then(() => {
          this.doOsOrder()
        }).catch(() => {})
      } else {
        this.doOsOrder()
      }
    },
    doOsOrder() {
      this.submitForm.date = Moment(new Date()).format('YYYY-MM-DD')
      saveOsOrder(this.submitForm).then(resp => {
        if (resp.success) {
          Toast.success('订单外发成功')
          this.submitForm = {}
          this.$emit('close')
        }
      })
    },
    amountChange(val) {
      var quantity = this.orderInfo.quantity
      var unitPrice = this.orderInfo.unitPrice
      if (quantity && unitPrice) {
        this.orderInfo.amount = Number(quantity) * Number(unitPrice)
      }
    },
    handleCloseSupplier(row) {
      this.showSupplier = false
      if (row) {
        this.submitForm.supplierId = row.id
        this.submitForm.supplierName = row.supplierName
      }
    }
  }
}
</script>
<style scoped>

</style>

